<script lang="ts" setup>
import { reactive, onActivated, defineAsyncComponent, ref } from 'vue'
import { RentBikeTablePageType, BikeType } from '@/types/enum'
import IdForm from '@/components/form/IdForm.vue'
import GoButton from '@/components/basic/GoButton.vue'
import RentBikeTable from '@/components/table/RentBikeTable.vue'
import { useTable } from '@/hooks/useTable'
import { queryBike } from '@/api/bike'
import { queryBikeTableCol } from '@/api/bike/types/bike'
import { getToken } from '@/utils/cache/cookies'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
const route = useRoute()
const form = reactive({
  bikeCode: '',
  type: '0',
  storeId: route.query.storeId
})
const { data, loading, pagination, load, handleCurrentChange, handleSizeChange, setCurrentPage } =
  useTable<queryBikeTableCol>(queryBike, getToken() ?? '', () => form)
const onSubmit = () => {
  // 提交表单的逻辑
  setCurrentPage(1)
  load()
}
const router = useRouter()
const bikeAMap = () => {
  if (pagination.total == 0) {
    ElMessage.error('暂无数据')
    return
  }
  router.push({
    name: 'LongBikeAMap',
    query: {
      pageSize: pagination.total,
      ...form
    }
  })
}
const setId = (id: string) => {
  form.storeId = id
}
defineExpose({ load, setId })
onActivated(() => {
  form.storeId = route.query.storeId
})
/** 查看订单详情 */
const OrderInfoRef = ref<InstanceType<typeof OrderInfo> | null>(null)
const OrderInfo = defineAsyncComponent(() => import('@/components/dialog/OrderInfo.vue'))
const seeOrderInfo = (orderId: string, userId: string) => {
  OrderInfoRef.value?.setId(orderId, userId)
  OrderInfoRef.value?.open()
}
</script>

<template>
  <id-form v-model="form" @search="onSubmit" type="bike">
    <template #after>
      <el-form-item float-right>
        <go-button icon-name="bike" @click="bikeAMap" />
      </el-form-item>
      <el-form-item prop="type" float-right>
        <el-select v-model="form.type" style="width: 120px">
          <el-option value="0" label="全部车辆" />
          <el-option value="3" label="租赁中" />
          <el-option value="1" label="空闲中" />
          <el-option value="2" label="断网" />
        </el-select>
      </el-form-item>
    </template>
  </id-form>
  <rent-bike-table
    :data="data"
    @show-orderinfo="seeOrderInfo"
    :page="RentBikeTablePageType.LongRent"
    :loading="loading"
    :is-in-operators-info="true"
    :type="form.type as BikeType"
  />
  <div flex justify-end mt-20>
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      v-model:current-page="pagination.pageNum"
      v-model:page-size="pagination.pageSize"
      background
      :total="pagination.total"
      layout="total,prev,pager,next,jumper,sizes"
    />
  </div>
  <order-info ref="OrderInfoRef" />
</template>

<style scoped></style>
